﻿
$(document).ready(function () {
    $('#cropbox').load(function () {
        restoreCorners();
    });

    $('#crop').click(function () {
        if (isResizing || isCropping) {
            return false;
        }
        if (jcrop_api == undefined) {
            jcrop_api = $.Jcrop('#cropbox', {
                onSelect: setSizes
            });
        }
        $('#apply').show();
        $('#cancel').show();
        isCropping = true;
        return false;
    });

    $('#apply').click(function () {
        $('#save').attr('class', '');
        if (isCropping) {
            cropImage();
        } else if (isResizing) {
            resizeImage();
        }
        hasChanges = true;
        $('#hasChanges').val('true');
        restore();
        return false;
    });

    $("#cancel").click(function () {
        restore();
        return false;
    });

    $('#resize').click(function () {
        if (isCropping || isResizing) {
            return false;
        }
        $('#imageSelection_container').show();
        $('#apply').show();
        $('#cancel').show();
        var cropbox = $('#cropbox');
        startHeightBackup = cropbox.height();
        startWidthBackup = cropbox.width();
        isResizing = true;
        return false;
    });

    $('#save').click(function () {
        if ($('#save').attr('class') == 'disabled')
            return false;
        var name = prompt('Enter Name:', imageNameOriginal + '_min');
        if (name) {
            imageNameOriginal = name;
            $.ajax({
                type: 'POST',
                url: 'http://localhost:82/Save',
                accepts: 'application/json',
                dataType: 'json',
                cache: false,
                data: {
                    ImageUrl: imageUrl,
                    ImageUrlTemp: imageUrlTemp,
                    ImageName: imageNameOriginal,
                    ImageNameUnique: imageNameUnique,
                    SavePath: savePath,
                    ImageExtension: imageExtension
                }
            });
        } else {
            return false;
        }
    });


    $('#imageSelection_tl').draggable({
        drag: function (event, ui) {
            var position = $('#imageSelection_tl').position();
            $('#imageSelection_wrapper').css({
                left: position.left + 4,
                top: position.top + 4
            });
            var cropbox = $('#cropbox');
            cropbox.width(startWidth - (position.left + 4));
            cropbox.height(startHeight - (position.top + 4));
        },
        start: function (event, ui) {
            startWidth = $('#cropbox').width();
            startHeight = $('#cropbox').height();
            hideCorners();
        },
        stop: function (event, ui) {
            startHeight = $('#cropbox').height();
            showCorners();
            restoreCorners();
            setNewSizes();
        },
        containment: 'parent'
    });

    $('#imageSelection_bl').draggable({
        drag: function (event, ui) {
            var position = $('#imageSelection_bl').position();
            $('#imageSelection_wrapper').css('left', position.left + 4);
            var cropbox = $('#cropbox');
            cropbox.width(startWidth - (position.left + 4));
            cropbox.height(position.top + 4);
        },
        start: function (event, ui) {
            startWidth = $('#cropbox').width();
            hideCorners();
        },
        stop: function (event, ui) {
            showCorners();
            restoreCorners();
            setNewSizes();
        }
    });

    $('#imageSelection_br').draggable({
        drag: function (event, ui) {
            var position = $('#imageSelection_br').position();
            $('#cropbox').css({
                width: $('#imageSelection_br').position().left + 4,
                height: $('#imageSelection_br').position().top + 4
            });
        },
        start: function (event, ui) {
            hideCorners();
        },
        stop: function (event, ui) {
            showCorners();
            restoreCorners();
            setNewSizes();
        },
        constraiment: 'parent'
    });

    $('#imageSelection_tr').draggable({
        drag: function (event, ui) {
            var position = $('#imageSelection_tr').position();
            $('#imageSelection_wrapper').css('top', position.top + 4);
            var cropbox = $('#cropbox');
            cropbox.height(startHeight - (position.top + 4));
            cropbox.css({
                width: position.left + 4
            });
        },
        start: function (event, ui) {
            startHeight = $('#cropbox').height();
            hideCorners();
        },
        stop: function (event, ui) {
            showCorners();
            restoreCorners();
            setNewSizes();
        }
    });

    $('#imageSelection_r').draggable({
        drag: function () {
            var left = $('#imageSelection_r').position().left;
            var cropbox = $('#cropbox');
            cropbox.width(left + 4);
            cropbox.height(startHeight);
        },
        start: function () {
            startHeight = $('#cropbox').height();
            hideCorners();
        },
        stop: function () {
            showCorners();
            restoreCorners();
            setNewSizes();
        },
        axis: 'x'
    });
    $('#imageSelection_l').draggable({
        drag: function () {
            var left = $('#imageSelection_l').position().left;
            $('#imageSelection_wrapper').css('left', left + 4);
            var cropbox = $('#cropbox');
            cropbox.width(startWidth - (left + 4));
            cropbox.height(startHeight);
        },
        start: function () {
            var cropbox = $('#cropbox');
            startWidth = cropbox.width();
            startHeight = cropbox.height();
            hideCorners();
        },
        stop: function () {
            showCorners();
            restoreCorners();
            setNewSizes();
        },
        axis: 'x'
    });
    $('#imageSelection_t').draggable({
        drag: function () {
            var top = $('#imageSelection_t').position().top;
            $('#imageSelection_wrapper').css('top', top + 4);
            var cropbox = $('#cropbox');
            cropbox.width(startWidth);
            cropbox.height(startHeight - (top + 4));
        },
        start: function () {
            var cropbox = $('#cropbox');
            startWidth = cropbox.width();
            startHeight = cropbox.height();
            hideCorners();
        },
        stop: function () {
            showCorners();
            restoreCorners();
            setNewSizes();
        },
        axis: 'y'
    });
    $('#imageSelection_b').draggable({
        drag: function () {
            var top = $('#imageSelection_b').position().top;
            var cropbox = $('#cropbox');
            cropbox.width(startWidth);
            cropbox.height(top);
        },
        start: function () {
            var cropbox = $('#cropbox');
            startWidth = cropbox.width();
            hideCorners();
        },
        stop: function () {
            showCorners();
            restoreCorners();
            setNewSizes();
        },
        axis: 'y'
    });
});

function setSizes(c) {
    cropX = c.x;
    cropY = c.y;
    cropHeight = c.h;
    cropWidth = c.w;
}

function restore() {
    $('#apply').hide();
    $('#cancel').hide();
    if (isResizing) {
        $('#imageSelection_container').hide();
        var cropbox = $('#cropbox');
        cropbox.height(startHeightBackup);
        cropbox.width(startWidthBackup);
        var preview = $('#preview');
        preview.height(startHeightBackup);
        preview.width(startWidthBackup);
        restoreCorners();
        isResizing = false;
    } else if (isCropping) {
        if (jcrop_api != undefined) {
            jcrop_api.destroy();
        }
        isCropping = false;
        jcrop_api = undefined;
    }
}

function restoreCorners() {
    var cropbox = $('#cropbox');
    var height = cropbox.height();
    var width = cropbox.width();
    var horOffsetFull = width - 4;
    var horOffsetHalf = width / 2 - 4;
    var vertOffsetFull = height - 4;
    var vertOffsetHalf = height / 2 - 4;
    $('#imageSelection_bl').css({
        left: -4,
        top: vertOffsetFull
    });
    $('#imageSelection_tl').css({
        left: -4,
        top: -4
    });
    startWidth = cropbox.width();
    $('#imageSelection_br').css({
        left: horOffsetFull,
        top: vertOffsetFull
    });
    $('#imageSelection_tr').css({
        left: horOffsetFull,
        top: -4
    });
    $('#imageSelection_b').css({
        top: vertOffsetFull,
        left: horOffsetHalf
    });
    $('#imageSelection_t').css({
        top: -4,
        left: horOffsetHalf
    });
    $('#imageSelection_l').css({
        top: vertOffsetHalf,
        left: -4
    });
    $('#imageSelection_r').css({
        top: vertOffsetHalf,
        left: horOffsetFull
    });
}

function setNewSizes() {
    var cropbox = $('#cropbox');
    resizeWidth = cropbox.width();
    resizeHeight = cropbox.height();
}

function cropImage() {
    $.ajax({
        type: 'POST',
        url: 'http://localhost:82/Crop',
        accepts: 'application/json',
        dataType: 'json',
        cache: false,
        data: {
            ImageUrl: imageUrl,
            ImageUrlTemp: imageUrlTemp,
            ImageName: imageNameOriginal,
            ImageNameUnique: imageNameUnique,
            SavePath: savePath,
            x: cropX,
            y: cropY,
            height: cropHeight,
            width: cropWidth,
            ImageExtension: imageExtension
        },
        success: reloadImage
    });
}

function resizeImage() {
    $.ajax({
        type: 'POST',
        url: 'http://localhost:82/Resize',
        accepts: 'application/json',
        dataType: 'json',
        cache: false,
        data: {
            ImageUrl: imageUrl,
            ImageUrlTemp: imageUrlTemp,
            ImageName: imageNameOriginal,
            ImageNameUnique: imageNameUnique,
            SavePath: savePath,
            width: resizeWidth,
            height: resizeHeight,
            ImageExtension: imageExtension
        },
        success: reloadImage
    });
}

function reloadImage(data) {
    if (data.isOkay) {
        var imageUrlWithTimeStamp = imageUrlTemp + '?' + new Date().getTime();
        $('#cropbox').css('width', '');
        $('#cropbox').css('height', '');
        $('#preview').css('width', '');
        $('#preview').css('height', '');
        $('#cropbox').removeAttr("src").attr('src', imageUrlWithTimeStamp);
        $('#preview').removeAttr("src").attr('src', imageUrlWithTimeStamp);
    }
}

function hideCorners() {
    $('#cropbox').css('opacity', '0.5');
    $('#imageSelection_br').css('opacity', '0');
    $('#imageSelection_tr').css('opacity', '0');
    $('#imageSelection_tl').css('opacity', '0');
    $('#imageSelection_bl').css('opacity', '0');
    $('#imageSelection_l').css('opacity', '0');
    $('#imageSelection_t').css('opacity', '0');
    $('#imageSelection_b').css('opacity', '0');
    $('#imageSelection_r').css('opacity', '0');
}

function showCorners() {
    $('#cropbox').css('opacity', '1');
    setPreviewSizes();
    $('#imageSelection_br').css('opacity', '0.5');
    $('#imageSelection_tr').css('opacity', '0.5');
    $('#imageSelection_tl').css('opacity', '0.5');
    $('#imageSelection_bl').css('opacity', '0.5');
    $('#imageSelection_l').css('opacity', '0.5');
    $('#imageSelection_t').css('opacity', '0.5');
    $('#imageSelection_b').css('opacity', '0.5');
    $('#imageSelection_r').css('opacity', '0.5');
}

function setPreviewSizes() {
    var cropbox = $('#cropbox');
    var preview = $('#preview');
    preview.css('width', cropbox.css('width'));
    preview.css('height', cropbox.css('height'));
    $('#imageSelection_wrapper').css({
        top: '0',
        left: '0'
    });
}